@import './variables.scss';

/* 通用重置样式 */
* {
  box-sizing: border-box;
}

page {
  background-color: $background-color-light;
  color: $text-color-primary;
  font-size: $font-size-md;
  line-height: $line-height-md;
}

/* 通用布局类 */
.container {
  padding: $spacing-md;
}

.flex {
  display: flex;
  
  &.flex-column {
    flex-direction: column;
  }
  
  &.flex-wrap {
    flex-wrap: wrap;
  }
  
  &.justify-center {
    justify-content: center;
  }
  
  &.justify-between {
    justify-content: space-between;
  }
  
  &.justify-around {
    justify-content: space-around;
  }
  
  &.align-center {
    align-items: center;
  }
  
  &.align-start {
    align-items: flex-start;
  }
  
  &.align-end {
    align-items: flex-end;
  }
}

/* 间距类 */
.m {
  &-xs { margin: $spacing-xs; }
  &-sm { margin: $spacing-sm; }
  &-md { margin: $spacing-md; }
  &-lg { margin: $spacing-lg; }
  &-xl { margin: $spacing-xl; }
  &-xxl { margin: $spacing-xxl; }
}

.mt {
  &-xs { margin-top: $spacing-xs; }
  &-sm { margin-top: $spacing-sm; }
  &-md { margin-top: $spacing-md; }
  &-lg { margin-top: $spacing-lg; }
  &-xl { margin-top: $spacing-xl; }
  &-xxl { margin-top: $spacing-xxl; }
}

.mr {
  &-xs { margin-right: $spacing-xs; }
  &-sm { margin-right: $spacing-sm; }
  &-md { margin-right: $spacing-md; }
  &-lg { margin-right: $spacing-lg; }
  &-xl { margin-right: $spacing-xl; }
  &-xxl { margin-right: $spacing-xxl; }
}

.mb {
  &-xs { margin-bottom: $spacing-xs; }
  &-sm { margin-bottom: $spacing-sm; }
  &-md { margin-bottom: $spacing-md; }
  &-lg { margin-bottom: $spacing-lg; }
  &-xl { margin-bottom: $spacing-xl; }
  &-xxl { margin-bottom: $spacing-xxl; }
}

.ml {
  &-xs { margin-left: $spacing-xs; }
  &-sm { margin-left: $spacing-sm; }
  &-md { margin-left: $spacing-md; }
  &-lg { margin-left: $spacing-lg; }
  &-xl { margin-left: $spacing-xl; }
  &-xxl { margin-left: $spacing-xxl; }
}

.p {
  &-xs { padding: $spacing-xs; }
  &-sm { padding: $spacing-sm; }
  &-md { padding: $spacing-md; }
  &-lg { padding: $spacing-lg; }
  &-xl { padding: $spacing-xl; }
  &-xxl { padding: $spacing-xxl; }
}

.pt {
  &-xs { padding-top: $spacing-xs; }
  &-sm { padding-top: $spacing-sm; }
  &-md { padding-top: $spacing-md; }
  &-lg { padding-top: $spacing-lg; }
  &-xl { padding-top: $spacing-xl; }
  &-xxl { padding-top: $spacing-xxl; }
}

.pr {
  &-xs { padding-right: $spacing-xs; }
  &-sm { padding-right: $spacing-sm; }
  &-md { padding-right: $spacing-md; }
  &-lg { padding-right: $spacing-lg; }
  &-xl { padding-right: $spacing-xl; }
  &-xxl { padding-right: $spacing-xxl; }
}

.pb {
  &-xs { padding-bottom: $spacing-xs; }
  &-sm { padding-bottom: $spacing-sm; }
  &-md { padding-bottom: $spacing-md; }
  &-lg { padding-bottom: $spacing-lg; }
  &-xl { padding-bottom: $spacing-xl; }
  &-xxl { padding-bottom: $spacing-xxl; }
}

.pl {
  &-xs { padding-left: $spacing-xs; }
  &-sm { padding-left: $spacing-sm; }
  &-md { padding-left: $spacing-md; }
  &-lg { padding-left: $spacing-lg; }
  &-xl { padding-left: $spacing-xl; }
  &-xxl { padding-left: $spacing-xxl; }
}

/* 文字类 */
.text {
  &-xs { font-size: $font-size-xs; }
  &-sm { font-size: $font-size-sm; }
  &-md { font-size: $font-size-md; }
  &-lg { font-size: $font-size-lg; }
  &-xl { font-size: $font-size-xl; }
  &-xxl { font-size: $font-size-xxl; }
  
  &-primary { color: $text-color-primary; }
  &-secondary { color: $text-color-secondary; }
  &-tertiary { color: $text-color-tertiary; }
  &-placeholder { color: $text-color-placeholder; }
  
  &-center { text-align: center; }
  &-left { text-align: left; }
  &-right { text-align: right; }
  
  &-bold { font-weight: bold; }
  &-normal { font-weight: normal; }
  
  &-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 颜色类 */
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-error { color: $error-color; }
.text-info { color: $info-color; }
.text-primary { color: $primary-color; }

.bg-success { background-color: $success-color; }
.bg-warning { background-color: $warning-color; }
.bg-error { background-color: $error-color; }
.bg-info { background-color: $info-color; }
.bg-primary { background-color: $primary-color; }

/* 卡片样式 */
.card {
  background-color: $background-color;
  border-radius: $border-radius-md;
  box-shadow: $box-shadow-sm;
  padding: $spacing-md;
  margin-bottom: $spacing-md;
  
  &.card-shadow {
    box-shadow: $box-shadow-md;
  }
}

/* 分割线 */
.divider {
  height: 1rpx;
  background-color: $border-color-light;
  margin: $spacing-md 0;
}

/* 按钮样式 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border-radius: $border-radius-md;
  font-size: $font-size-md;
  transition: all $transition-duration $transition-timing-function;
  
  &.btn-primary {
    background-color: $primary-color;
    color: $background-color;
    
    &:active {
      background-color: $primary-color-dark;
    }
  }
  
  &.btn-success {
    background-color: $success-color;
    color: $background-color;
  }
  
  &.btn-warning {
    background-color: $warning-color;
    color: $background-color;
  }
  
  &.btn-error {
    background-color: $error-color;
    color: $background-color;
  }
  
  &.btn-outline {
    background-color: transparent;
    border: 1rpx solid $border-color;
    color: $text-color-primary;
  }
  
  &.btn-text {
    background-color: transparent;
    color: $primary-color;
  }
  
  &.btn-sm {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
  }
  
  &.btn-lg {
    padding: $spacing-md $spacing-lg;
    font-size: $font-size-lg;
  }
  
  &.btn-block {
    width: 100%;
  }
  
  &.btn-disabled {
    opacity: 0.6;
    pointer-events: none;
  }
}

/* 输入框样式 */
.input {
  padding: $spacing-sm $spacing-md;
  border: 1rpx solid $border-color;
  border-radius: $border-radius-md;
  font-size: $font-size-md;
  background-color: $background-color;
  
  &:focus {
    border-color: $primary-color;
  }
  
  &.input-error {
    border-color: $error-color;
  }
}

/* 状态徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-xl;
  font-size: $font-size-xs;
  font-weight: bold;
  
  &.badge-primary { background-color: $primary-color; color: $background-color; }
  &.badge-success { background-color: $success-color; color: $background-color; }
  &.badge-warning { background-color: $warning-color; color: $background-color; }
  &.badge-error { background-color: $error-color; color: $background-color; }
  &.badge-info { background-color: $info-color; color: $background-color; }
  &.badge-light { background-color: $background-color-light; color: $text-color-primary; border: 1rpx solid $border-color; }
}

/* 列表样式 */
.list-item {
  display: flex;
  align-items: center;
  padding: $spacing-md;
  background-color: $background-color;
  border-bottom: 1rpx solid $border-color-light;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: $background-color-light;
  }
  
  .list-item-content {
    flex: 1;
    min-width: 0;
  }
  
  .list-item-extra {
    margin-left: $spacing-md;
    color: $text-color-secondary;
  }
}

/* 加载状态 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg;
  color: $text-color-secondary;
}

/* 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-xxl;
  color: $text-color-secondary;
  
  .empty-icon {
    font-size: 120rpx;
    margin-bottom: $spacing-md;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: $font-size-md;
  }
}